<template>
  <view class="content">
    <view class="orders">

      <view v-if="merchantTakeout == 1" class="orderstop">
        <view>
          <view v-show="options">
            <view @tap="gotoaddress" class="orderthree">
              <view v-if="addshow && distance<shoplist.scope">
                <text style="color: black;">{{ backaddlist[0].consigneeName }}</text>
              </view>
              <view style="margin-left: 20rpx;" v-if="addshow && distance<shoplist.scope">
                <text style="color: black;">{{ backaddlist[0].consigneeTelephone }}</text>
              </view>
            </view>
          </view>
          <view v-show="options">
            <view @tap="gotoaddress" class="ordertwo">
              <view v-if="!addshow && distance<shoplist.scope">
                <text>请确定收货地址</text>
              </view>
              <view v-if="addshow && distance<shoplist.scope">
                <text style="color: black;">{{ backaddlist[0].consigneeAddress }}</text>
              </view>
              <view v-if="addshow==false && distance>shoplist.scope">
                <text style="color: black;">超出配送范围，请更换收货地址</text>
              </view>
              <view style="margin-left: 20rpx;">
                <image src="../static/image/pagesDelivery/right.png" mode="scaleToFill" />
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="merchantTakeout == 3" class="orderstop">
        <view>
          <view v-show="options">
            <view @tap="gotoaddress" class="orderthree">
              <view v-if="addshow">
                <text style="color: black;">{{ backaddlist[0].consigneeName }}</text>
              </view>
              <view style="margin-left: 20rpx;" v-if="addshow">
                <text style="color: black;">{{ backaddlist[0].consigneeTelephone }}</text>
              </view>
            </view>
          </view>
          <view v-show="options">
            <view @tap="gotoaddress" class="ordertwo">
              <view v-show="!addshow">
                <text>请确定收货地址</text>
              </view>
              <view v-if="addshow">
                <text style="color: black;">{{ backaddlist[0].consigneeAddress }}</text>
              </view>
              <view style="margin-left: 20rpx;">
                <image src="../static/image/pagesDelivery/right.png" mode="scaleToFill" />
              </view>
            </view>
          </view>
        </view>

      </view>
      <view class="ordersmain">
        <view class="ordermainone">
          <view class="orderleft">{{ shoplist.merchantName }}</view>
        </view>
        <view class="ordermaintwo" v-for="(item, index) in shopArr" :key="index">
          <view class="productImg">
            <image :src="item.productImg" mode="widthFix" style="width: 100%;" @tap="preview(item.productImg)"/>
          </view>
          <view style="flex: 1;">
            <view class="ordertwoname">{{ item.productName }}</view>
            <view class="ordertwonum">
              <text v-if="merchantTakeout == 3" class="ordertwotop">x{{ item.productCount }}</text>
              <text v-if="merchantTakeout == 1" class="ordertwotop">x{{ item.productCount }}</text>
              <text v-if="merchantTakeout == 1" class="ordertwobottom">￥{{ ((item.productPrice * item.productCount) / 100).toFixed(2)
                }}</text>
              <text v-if="merchantTakeout == 3" class="ordertwobottom">￥{{ ((item.productPrice * item.productCount) / 100).toFixed(2)
                }}</text>
            </view>
          </view>
        </view>
        <view v-if="this.merchantTakeout == 1" class="Distribution">配送费￥{{ distributiondata }}</view>
        <view class="pay">
          <view>支付方式</view>
          <view style="display:flex; align-items:center;">
            <image src="../static/image/pagesDelivery/alipay.png" mode="scaleToFill" />
            <view style="font-weight: 600; color: #424141;">支付宝</view>
          </view>
        </view>
        <view @tap="remark" class="remark">
          <view>
            <view>备注：</view>
          </view>
          <view style="display:flex; ">
            <view
              style="margin-right:24rpx; width:200rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align:right;">
              <text>{{ value }}</text>
            </view>
            <view style="display: flex; align-items:center;">
              <image style="width:20rpx;height:32rpx;" src="../static/image/pagesDelivery/right.png"
                mode="scaleToFill" />
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- <u-modal style=" z-index:888;" v-model="show" :title="none" >
      <u-input style=" z-index:9999999;" v-model="value" :type="type" :border="border" :height="height" :auto-height="autoHeight" />
    </u-modal>-->
    <u-modal v-model="show" :show-title="false">
      <view style="padding: 20rpx;">
        <u-input v-model="value" :type="type" :border="border" :height="height" :auto-height="autoHeight" />
      </view>
    </u-modal>
    <view class="gotoEndPay">
      <view>
        <view>
          <text style="font-size:24rpx;">￥</text>
          <text style="font-size:40rpx;">{{ numprice / 100 }}</text>
        </view>
        <view v-if="this.merchantTakeout == 1" style="font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #FFFFFF;
                line-height: 28rpx;
                ">配送费￥{{ distributiondata }}</view>
      </view>
      <view v-if="merchantTakeout == 1" @tap="gotoendpay" :style="{'background':this.distance > this.shoplist.scope || this.shoplist.businessStatus == 1 || this.shoplist.isInOpenTime == 0 ? '#ccc' : '#d12c25'}" class="gotoright">支付订单</view>
      <view v-if="merchantTakeout == 3" @tap="gotoendpay" :style="{'background': this.shoplist.businessStatus == 1 || this.shoplist.isInOpenTime == 0 ? '#ccc' : '#d12c25'}" class="gotoright">支付订单</view>
    </view>
  </view>
</template>

<script>
import { createOrder,getTakeoutFeeAndDistance } from '@/api/common'
import { selectUserAddRessList } from '@/api/main'
import { debounce } from 'lodash';
let that = null;
export default {
  data() {
    return {
      backaddlist: [],
      addshow: false,
      handoff: false,
      shopArr: [],
      shoplist: [],
      options: true,
      show: false,
      value: "",
      type: "textarea",
      border: true,
      height: 100,
      autoHeight: true,
      numprice: 0,
      iphone: false,
      merchantTakeout: 0,
      orderNum: '',
      distributiondata:null,
      distance:null
    };
  },
  onLoad() {
    //修改信息时，反填信息
    that = this;
    const eventChannel = that.getOpenerEventChannel();
    // 监听redactInfo事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on("redactInfo", function (data) {
      that.shopArr = data.info.shopArr;
      console.log('看看传参', data.info)
      that.distributiondata=data.info.distributiondata
      that.merchantTakeout = data.info.merchantTakeout
      that.distance=data.info.distance
      that.shoplist = data.info.shoplist
      console.log('看看父id', that.merchantTakeout)
      if (that.merchantTakeout == 3) {
        that.shopArr.forEach(e => {
          that.numprice = that.numprice + e.productPrice * e.productCount;
        });
      } else if (that.merchantTakeout == 1) {
        that.shopArr.forEach(e => {
          that.numprice = that.numprice + e.productPrice * e.productCount;
        });
      }
      selectUserAddRessList().then(res=>{
        console.log('看看地址',res.data)
        const list=res.data.filter(item=>item.consigneeDefault===1)
        that.backaddlist=list
        console.log('看看默认地址',that.backaddlist)
        if(that.merchantTakeout == 1){
          that.getdistance()
        }else{
          that.addshow = true
        }
      })
    });
  },

  onShow() { 
    
   },
  methods: {
    preview(img) {
      uni.previewImage({
        urls: [img]
      })
    },
    gotoaddress() {
        uni.$once("nextStep", function (e) {
        that.backaddlist = e;
        console.log('看看这个是什么玩意', that.backaddlist)
        console.log('merchantTakeout', that.merchantTakeout)
        if(that.merchantTakeout == 1){
          that.getdistance()
        }else{
          that.addshow = true
        }
        });
        uni.navigateTo({
          url: "/pagesMine/mineAddress"
        });
    },
    getdistance(){
      let obj={
        userLng:this.backaddlist[0].consigneeLng,
        userLat:this.backaddlist[0].consigneeLat,
        merchantLng:this.shoplist.lng,
        merchantLat:this.shoplist.lat,
      }
      getTakeoutFeeAndDistance(obj).then(res=>{
        console.log('看看距离',res)
        this.distance=res.data.distance
        this.distributiondata=res.data.payriderfee
        if(this.distance>this.shoplist.scope){
          that.addshow = false
        }else{
          that.addshow = true
        }
      })
    },
    remark() {
      console.log(111);
      this.show = true;
    },
    gotoendpay: debounce(function () {
      if(this.distance>this.shoplist.scope && merchantTakeout == 1){
        uni.showToast({
          title: '超出配送范围',
          icon: 'none',
          duration: 2000
        });
      } else if(this.backaddlist.length == 0) {
        uni.showToast({
          title: '请选择地址',
          icon: 'none',
          duration: 2000
        });
      }  else if ( this.shoplist.businessStatus == 1 || this.shoplist.isInOpenTime == 0 ) {
        uni.showToast({
          title: '店铺已打烊',
          icon: 'none',
          duration: 2000
        });
      } else {
        if (this.merchantTakeout == 3) {
          console.log('看看merchantTakeout', this.merchantTakeout);
          let obj = {
            userName: this.backaddlist[0].consigneeName,
            userPhone: this.backaddlist[0].consigneeTelephone,
            merchantId: this.shoplist.merchantId,
            userAddress: this.backaddlist[0].consigneeAddress,
            payType: 1,
            orderType: this.merchantTakeout,
            remake: this.value,
            userLng: this.shoplist.lng,
            userLat: this.shoplist.lat,
            orderProductsList: this.shopArr,
            
          };
          createOrder(obj).then(res => {
            console.log('看看添加订单接口3', res);
            const inventory = res.code;
            if (inventory == 202) {
              uni.showToast({
                title: '库存不足',
                icon: 'none',
                duration: 2000
              });
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1
                });
              }, 1000);
            } else if (inventory == 200) {
              this.orderNum = res.data.orderNum;
              uni.redirectTo({
                url: "/pagesAgriculture/agricultureWaitPay?orderNum=" + this.orderNum,
              });
            }
          });
        } else if (this.merchantTakeout == 1) {
          console.log('看看merchantTakeout', this.merchantTakeout);
          let obj = {
            userName: this.backaddlist[0].consigneeName,
            userPhone: this.backaddlist[0].consigneeTelephone,
            merchantId: this.shoplist.merchantId,
            userAddress: this.backaddlist[0].consigneeAddress,
            payType: 1,
            orderType: this.merchantTakeout,
            remake: this.value,
            userLng: this.backaddlist[0].consigneeLng,
            userLat: this.backaddlist[0].consigneeLat,
            orderProductsList: this.shopArr,
            payForRider:this.distributiondata * 100
          };
          console.log('看看obj', obj);
          createOrder(obj).then(res => {
            console.log('看看添加订单接口1', res.code);
            const inventory = res.code;
            const shopcode = res.data;
            if (inventory == 202) {
              uni.showToast({
                title: '库存不足',
                icon: 'none',
                duration: 2000
              });
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1
                });
              }, 1000);
            }else if(inventory == 500){
              this.$u.toast(res.message)
            } else if (inventory == 200) {
              this.orderNum = res.data.orderNum;
              uni.redirectTo({
                url: "/pagesDelivery/deliveryPayEnd?orderNum=" + this.orderNum,
              });
            }
          });
        }
      }
    }, 300),
  }
};
</script>
<style scoped lang="scss">
.content {
  min-height: 100vh;
  background: linear-gradient(#ffffff 0%, #f5f5f5 20%, #f5f5f5 100%);
  .orders {
    border-radius: 12rpx 12rpx 0rpx 0rpx;
    padding-bottom: 180rpx;
    .orderone {
      display: flex;
      justify-content: space-around;
      height: 96rpx;
      line-height: 96rpx;

      .topleft {
        width: 50%;
        text-align: center;
      }

      .topright {
        width: 50%;
        text-align: center;
      }
    }

    .orderstop {
      background: #ffffff;
      margin: 0 24rpx;
      border-radius: 0 0 12rpx 12rpx;
      padding: 70rpx 0 32rpx 0;

      .ordertwo {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 40rpx;
        color: #d12c25;
        padding: 0rpx 24rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        image {
          width: 20rpx;
          height: 32rpx;
        }
      }

      .orderthree {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 40rpx;
        color: #d12c25;
        padding: 0rpx 24rpx;
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;

        image {
          width: 20rpx;
          height: 32rpx;
        }
      }

      .orderfour {
        height: 88rpx;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        border: 1rpx solid #ffb800;
        margin: 24rpx 56rpx 0 56rpx;
        padding: 24rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #ffb800;
        display: flex;
        justify-content: space-between;
      }
    }

    .ordersmain {
      border-radius: 8rpx;
      margin: 18rpx 25rpx 0 25rpx;
      padding: 32rpx 22rpx;
      background-color: white;

      .ordermainone {
        display: flex;
        justify-content: space-between;

        .orderleft {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #000000;

          font-style: normal;
        }

        .orderright {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #d12c25;
          font-style: normal;
        }
      }

      .ordermaintwo {
        display: flex;
        margin-top: 18rpx;

        .productImg {
          width: 156rpx;
          height: 132rpx;
          border-radius: 12rpx;
          overflow: hidden;
        }

        .ordertwoname {
          padding: 0 0 38rpx 24rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #000000;
          line-height: 38rpx;
          font-style: normal;
        }

        .ordertwonum {
          display: flex;
          justify-content: space-between;
          padding-left: 24rpx;

          .ordertwotop {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #999999;
          }

          .ordertwobottom {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #ff0000;
          }
        }
      }

      .Distribution {
        margin-top: 18rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #999999;
        font-style: normal;
      }

      .pay {
        margin-top: 18rpx;
        display: flex;
        justify-content: space-between;
        font-family: PingFang SC, PingFang SC;
        font-size: 28rpx;
        color: #000000;
        align-items: center;
        font-style: normal;

        image {
          width: 36rpx;
          height: 36rpx;
          margin-right: 14rpx;
        }
      }

      .remark {
        display: flex;
        justify-content: space-between;
        margin-top: 18rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #000000;
        align-items: center;
      }
    }
  }

  .gotoEndPay {
    width: 90%;
    height: 96rpx;
    background: #333333;
    border-radius: 176rpx;
    margin-left: 5%;
    display: flex;
    justify-content: space-between;
    color: white;
    padding-left: 48rpx;
    position: fixed;
    bottom: 64rpx;
    align-items: center;
    .gotoright {
      width: 24%;
      background: linear-gradient(270deg, #d12c25 0%, #d12c25 100%);
      border-radius: 0 176rpx 176rpx 0;
      text-align: center;
      line-height: 96rpx;
      color: white;
    }
    .gotorighttwo {
      width: 24%;
      background: #ccc;
      border-radius: 0 176rpx 176rpx 0;
      text-align: center;
      line-height: 96rpx;
      color: white;
    }
  }
}
</style>
